<template>
  <div class="init" v-if="initBool">
    <div class="init-first">
      <button class="btn" @click="clickAccess">走进七彩小镇</button>
    </div>
  </div>
  <div v-else>
    <homeHeaderVue />
    <homeFooter />
    <router-view></router-view>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue'
import homeHeaderVue from '@/components/homeHeader.vue'
import homeFooter from '@/components/homeFooter.vue'
// 引入全局变量
const { appContext : { config: { globalProperties } } } = getCurrentInstance()
// 隐藏按钮
let initBool=ref(true)
// 创建cesium实例对象
const data = reactive({
	cesium3d: {}
})

onMounted(()=>{
	data.cesium3d = globalProperties.$Cesium3d
})
// 点击改变按钮隐藏
function clickAccess() {
	data.cesium3d.earthRotate(false)
  data.cesium3d.access()
	initBool.value = false
  // data.cesium3d.addIdentificationLine(121.6083650130081,29.896377094766457,100)
  data.cesium3d.addMarker(121.6083650130081,29.896377094766457,100,{image: 1,scale: 1.0})
  data.cesium3d.addMarker(121.61072835362246,29.89678466875656,100,{image: 0})
  data.cesium3d.polyGroundPrimitive([121.60768504265734, 29.8936197373101,121.60836257654552, 29.893696057326498],100)
  data.cesium3d.lightingWall([121.60805, 29.89807, 55.97, 121.60871, 29.89463, 55.97, 121.61124, 29.89487, 55.97, 121.61024, 29.89840, 55.97, 121.60805, 29.89807, 55.97])
  data.cesium3d.polyBox()
  data.cesium3d.flowline([121.60400, 29.89380, 55.97, 121.60658, 29.89440, 55.97, 121.60730, 29.89137, 55.97, 121.60448, 29.89081, 55.97, 121.60400, 29.89380, 55.97])
}
</script>

<style lang="less" scoped>
.init{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000000;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  .init-first{
    width: 130px;
    height: 36px;
    border-radius: 18px;
    .btn{
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
      background-color: transparent;
      color: #fff;
      border: 1.5px solid #fff;
      border-radius: 18px;
      cursor: pointer;
      box-sizing: border-box;
      &:hover{
        border: none;
        background-color: #56FFFF;
        color: #000;
      }
    }
  }
}
</style>